<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>员工列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body a {
      text-decoration: none;
      color: #0d3a4b;
    }

    .active {
      color: #ffffff;
    }

    .wrap {
      width: 700px;
      height: 500px;
      background-color: skyblue;
      margin: 0 auto;
      position: relative;
    }

    .wrap #table {
      width: 460px;
      border-radius: 12px;
      position: absolute;
      left: 50%;
      top: 160px;
      transform: translateX(-50%);
      box-sizing: border-box;
      overflow: hidden;
    }

    .wrap #table thead {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      color: #fff;
      background: #4cbfe5;
    }

    .wrap #table thead a {
      color: #fff;
    }

    .wrap #table tbody {
      color: #19c2ff;
    }

    .wrap #table tbody a {
      color: #19c2ff;
    }

    .wrap #table tbody tr {
      background: #fff;
    }

    .ctrl {
      position: absolute;
      left: 200px;
      top: 100px;
    }

    .ctrl div {
      width: 300px;
      line-height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    h1 {
      text-align: center;
      padding-top: 20px;
      color: white;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>

<body>
  <div class="wrap">
    <h1>员工列表</h1>
    <div class="ctrl">
      <div class="age_sort nu">
        <a href="javascript:;">年龄从小到大</a>
        <a href="javascript:;">年龄从大到小</a>
        <a href="javascript:;" class="active">默认排序</a>
      </div>
      <div class="gender_show">
        <a href="javascript:;">只显示男性</a>
        <a href="javascript:;">只显示女性</a>
        <a href="javascript:;" class="active">默认</a>
      </div>
    </div>
    <table id="table">
      <thead>
        <tr>
          <th>id</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>0</th>
          <th>小明</th>
          <th>24</th>
          <th>男</th>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    // 1.通过ajax请求数据，并且渲染到页面上
    //1. 发送ajax 显示数据库里的用户信息
    // 加载页面的时候就发送ajax请求；
    $.get("/getusers", null, res => {
      console.log(res);
      rendomDom(res);
    })
    // 2.把数据渲染到页面上
    function rendomDom (data) {
      let tbodyEle = document.querySelector("tbody");
      // 先情空掉tbody里的内容
      tbodyEle.innerHTML = "";
      // 根据data组装视图
      data.forEach((item, k) => {
        let trEle = document.createElement("tr");
        trEle.innerHTML = `<th>${k}</th>
                           <th>${item.name}</th>
                           <th>${item.age}</th>
                           <th>${item.gender}</th>`;
        tbodyEle.appendChild(trEle);
      })
    }
    // 二、获取年龄排序的数据，通过携带参数来区分不同类型的数据、
    // 请求地址：/getusers -----》 1./getusers?age=0 (年龄由小到大) 2./getusers?age=1(年龄由大到小) 3.getusers?age=2(默认排序) 
    // 2.声明两个全局变量
    let ageIndex = 2;  // 记录当前 年龄点击的按钮索引值 ，默认是2
    let genderIndex = 2;  // 记录当前 性别按钮的索引值 ，默认是2
    // 获取年龄按钮绑定事件
    let ageBtns = document.querySelectorAll(".age_sort a");
    ageBtns.forEach((btn, k) => {
      btn.onclick = function () {
        ageIndex = k // 点击按钮的时候给全局变量赋值
        // 点击按钮添加高亮效果
        ageBtns.forEach((item, key) => {
          if (key == k) {
            // 添加高亮效果
            item.classList.add("acitve");
          } else {
            item.classList.remove("acitve");
          }
        })
        console.log(k);
        // 发送ajax请求
        // 年龄排序的时候同时做性别的筛选
        $.get("/getusers", { age: k, gender: genderIndex }, function (res) {
          console.log(res);
          rendomDom(res);// 根据最新的排序数据 渲染dom结构。
        })
      }
    })

    // 三 、性别筛选 ：把性别按钮的索引 传递给nodejs 处理，nodejs根据不同的索引返还不同的数据
    // 1.获取所有性别的按钮
    let genderBtns = document.querySelectorAll(".gender_show a");
    genderBtns.forEach((gender, k) => {
      gender.onclick = function () {
        genderIndex = k;
        // 性别按钮的高亮
        genderBtns.forEach((item, key) => {
          if (key == k) {
            item.classList.add("acitve");
          } else {
            item.classList.remove("acitve");
          }
        })
        console.log(k);
        // 在筛选性别的时候同时做年龄排序
        $.get("/getusers", { gender: k, age: ageIndex }, function (res) {
          console.log(res);
          rendomDom(res); // 根据最新的排序数据，渲染dom结构
        })
      }
    })

  </script>
</body>

</html>